<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Sliding Tabs - jQuery Plugin</title>
    <meta name="description" content="Create animated sliding tabs for your site using the Sliding Tabs jQuery plugin" />
    
    <!-- CSS -->           
    <link rel="stylesheet" type="text/css" href="css/demo.css" />
    <!--[if IE 6]>
        <style type="text/css">
            body {padding-top:0px;}
        </style>
    <![endif]-->
    <!--[if lte IE 7]>        
        <style type="text/css">
            div.tooltip {width:73px;}
        </style>
    <![endif]-->        
    <link rel="stylesheet" type="text/css" href="css/slidingtabs-horizontal.css" />
    <link rel="stylesheet" type="text/css" href="css/slidingtabs-vertical.css" />
    
    <!-- JavaScript -->
    <script type="text/javascript" src="http://www.google.com/jsapi"></script><script type="text/javascript">google.load("jquery", "1.6.2");</script>
	<script type="text/javascript" src="js/plugins/jquery.mousewheel.min.js"></script>
	<script type="text/javascript" src="js/plugins/jquery.easing.1.3.js"></script>
	<script type="text/javascript" src="js/demo/jquery.slidingtabs.demo.pack.js"></script>
    <script type="text/javascript">    	
	$(document).ready(function() {
  				
  		// Horizontal Sliding Tabs demo
  		$('div#st_horizontal').slideTabs({
  			// Options
			contentAnim: 'slideH',
			contentAnimTime: 600,
			contentEasing: 'easeInOutExpo',
			tabsAnimTime: 300			
  		});		
  		
  		// Vertical Sliding Tabs demo
  		$('div#st_vertical').slideTabs({
  			// Options
			contentAnim: 'slideH',
			contentAnimTime: 600,
			contentEasing: 'easeInOutExpo',
			orientation: 'vertical',
  			tabsAnimTime: 300
  		});		
  	
  	});
    </script>
    <script type="text/javascript">
	$(function() {	  
		if($.browser.mozilla||$.browser.msie){$('div.column').css('float','none');}
		
		/* 
		 * Tooltip for the customization buttons
		 */
		$('body').prepend('<div class="tooltip"><p></p><div class="tt_arrow"></div></div>');
		var tt = $('div.tooltip'), btn, t, b, y, x;
		
		$('ul.customize li a').hover(function() {								
			btn = $(this);			
			tt.children('p').text(btn.attr('title'));								
						
			t = Math.floor(tt.outerWidth(true)/2);
			b = Math.floor(btn.outerWidth(true)/2);							
			y = (btn.offset().top-30);
			x = (btn.offset().left-(t-b));
						
			tt.css({'top': y+'px', 'left': x+'px', 'display': 'block'});			
			   
		}, function() {	tt.hide(); });
	});		
	</script>
    
</head>
<body id="top">	        
    
    <div id="header">
    
        <div class="header_center">                    
                           
            <ul id="nav">
                <li class="logo"><h1><a href="#top">Sliding Tabs</a></h1><a href="changelog.txt" class="version" title="View changelog">1.9.0</a></li>
                <li><a href="#intro" class="demos">Demos &amp; Features</a></li>            
                <li><a href="#docs" class="howto">How to Use</a></li>
                <li><a href="#opts" class="opts">Options</a></li>
                <li class="fl_r"><a href="http://codecanyon.net/item/sliding-tabs-jquery-plugin/141774" class="buy">Purchase</a></li>
            </ul>                                              
        
        </div> <!-- /.header_center -->
    
    </div> <!-- /#header -->
    
    <div id="container">        
                                             
        <div id="intro">        	
            <em>The <span>sliding tabs</span> jQuery plugin let's you create any number of tabs and make them slideable with the <span>mouse scroll wheel</span> or <span>directional buttons</span>.</em>            
        </div> 
        
        <div id="demos" class="column">                	
            
            <h1>Horizontal demo</h1>                     
            
            <!-- Start HTML - Horizontal tabs -->
            <div id="st_horizontal" class="st_horizontal">                                                
                
                <div class="st_tabs_container">                                                                                                                                          
                    
                    <a href="#prev" class="st_prev"></a>
                    
                    <div class="st_slide_container">
                    
                        <ul class="st_tabs">
                            <li><a href="#st_content_1" rel="tab_1" class="st_tab st_first_tab st_tab_active">Horizontal Tab #1</a></li>
                            <li><a href="#st_content_2" rel="tab_2" class="st_tab">Horizontal Tab #2</a></li>                                     
                            <li><a href="#st_content_3" rel="tab_3" class="st_tab">Horizontal Tab #3</a></li>
                            <li><a href="#st_content_4" rel="tab_4" class="st_tab">Horizontal Tab #4</a></li>
                            <li><a href="#st_content_5" rel="tab_5" class="st_tab">Horizontal Tab #5</a></li>                                                       
                            <li><a href="#st_content_6" rel="tab_6" class="st_tab">Horizontal Tab #6</a></li>
                            <li><a href="#st_content_7" rel="tab_7" class="st_tab">Horizontal Tab #7</a></li>
                            <li><a href="#st_content_8" rel="tab_8" class="st_tab">Horizontal Tab #8</a></li>
                            <li><a href="#st_content_9" rel="tab_9" class="st_tab">Horizontal Tab #9</a></li>
                            <li><a href="#st_content_10" rel="tab_10" class="st_tab">Horizontal Tab #10</a></li>                                        
                        </ul>
                    
                    </div> <!-- /.st_slide_container -->
                    
                    <a href="#next" class="st_next"></a>                                                                                                
                
                </div> <!-- /.st_tabs_container -->
               
                <div class="st_view_container">
                
                    <div class="st_view">
                                
                        <div id="st_content_1" class="st_tab_view st_first_tab_view">
                            <h2>Horizontal Tab #1</h2>
                            
                            <div class="text">
                                <p>Lorem ipsum dolor sit amet, duis netus ut posuere feugiat arcu, purus wisi quis fringilla at, nunc ut eget elit duis erat praesent, ut fermentum lacus turpis cras. Justo gravida erat quam mauris purus, aliquam quisque, eget nisl. Pellentesque nibh duis odio morbi quam, scelerisque convallis aenean quam tincidunt ornare nam nec feugiat sodales tristique.</p>
                                
                                <blockquote><p>Aliquam commodo ullamcorper aenean erat. Nullam vel justo in neque porttitor eget laoreet. Aenean lacus adipiscing.</p></blockquote>
                                        
                                <p>Aliquam commodo ullamcorper erat. Nullam vel justo cras porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing nonummy, eget non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus tincidunt diam nec eget urna.</p>
                                
                                <p>Curabitur velit. Veniam donec orci viverra, lorem convallis in libero quisque, purus erat dolor curabitur, justo arcu nisl, natoque velit euismod dapibus nulla semper. Suspendisse odio tempor. Id ornare nam nec feugiat, ac consectetuer magna, dolor enim vel in, pulvinar bibendum ante ac, dui nibh dui est neque lacinia et. Duis netus ut posuere feugiat arcu, purus wisi quis fringilla at, nunc ut eget elit duis erat, eu praesent, ut fermentum lacus turpis cras. Justo gravida erat quam mauris purus, aliquam quisque, eget nisl. Pellentesque nibh ut odio morbi quam, scelerisque convallis tincidunt tristique.</p>
                            </div>                            
                        </div>
                        
                        <div id="st_content_2" class="st_tab_view">
                            <h2>Horizontal Tab #2</h2>
                            
                            <div class="text">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a tellus nec tellus volutpat interdum vel vel nisi. Vestibulum vestibulum porta ultrices. Suspendisse pharetra nisi eu orci sollicitudin nec suscipit tellus lacinia. Cras porta metus sit amet dolor imperdiet at mollis est malesuada. Nulla ligula dolor, porta vel odio. Sed sodales nulla blandit mauris commodo eu varius purus rhoncus. Nam imperdiet elementum egestas. Proin sapien metus, viverra quis tristique a, malesuada a nibh.</p>                                                                
                                
                                <blockquote>Nam et iaculis est. Phasellus nec tempor arcu. Praesent risus vitae eget facilisis tempus fermentum eget mauris semper.</blockquote>                                                                        
                                
                                <p>Nam et iaculis est. Phasellus nec tempor arcu. Praesent at risus vitae lacus facilisis tempus et sed tortor. Duis cursus sapien eget neque laoreet quis fermentum mauris semper. Nulla a diam quis tellus lobortis congue ut vitae massa, sed a ante eros.</p>
                                
                                <p>Donec lacinia aliquet porttitor. Pellentesque vel sem et dui sagittis aliquet. Ut et est eget augue tristique pharetra sit amet quis orci. Quisque elit sem, feugiat a auctor ac, congue vitae massa. Nulla convallis tortor eget ligula elementum in fringilla augue elementum. Ut bibendum accumsan nibh non fringilla. Fusce nec elementum enim. Duis condimentum cursus massa, elit bibendum turpis auctor elementum. Quisque ante felis, tincidunt vel iaculis non, volutpat non neque.</p>                                
                            </div>
                        </div>
                        
                        <div id="st_content_3" class="st_tab_view">
                            <h2>Horizontal Tab #3</h2>
                            
                            <div class="text">
                                <p>Lorem ipsum dolor sit amet, duis netus ut posuere feugiat arcu, purus wisi quis fringilla at, nunc ut eget elit duis erat praesent, ut fermentum lacus turpis cras. Justo gravida erat quam mauris purus, aliquam quisque, eget nisl. Pellentesque nibh duis odio morbi quam, scelerisque convallis aenean quam tincidunt ornare nam nec feugiat sodales tristique.</p>
                                
                                <blockquote><p>Aliquam commodo ullamcorper aenean erat. Nullam vel justo in neque porttitor eget laoreet. Aenean lacus adipiscing.</p></blockquote>
                                        
                                <p>Aliquam commodo ullamcorper erat. Nullam vel justo cras porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing nonummy, eget non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus tincidunt diam nec eget urna.</p>
                                
                                <p>Curabitur velit. Veniam donec orci viverra, lorem convallis in libero quisque, purus erat dolor curabitur, justo arcu nisl, natoque velit euismod dapibus nulla semper. Suspendisse odio tempor. Id ornare nam nec feugiat, ac consectetuer magna, dolor enim vel in, pulvinar bibendum ante ac, dui nibh dui est neque lacinia et. Duis netus ut posuere feugiat arcu, purus wisi quis fringilla at, nunc ut eget elit duis erat, eu praesent, ut fermentum lacus turpis cras. Justo gravida erat quam mauris purus, aliquam quisque, eget nisl. Pellentesque nibh ut odio morbi quam, scelerisque convallis tincidunt tristique.</p>
                            </div>
                        </div>
                        
                        <div id="st_content_4" class="st_tab_view">
                            <h2>Horizontal Tab #4</h2>
                            
                            <div class="text">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a tellus nec tellus volutpat interdum vel vel nisi. Vestibulum vestibulum porta ultrices. Suspendisse pharetra nisi eu orci sollicitudin nec suscipit tellus lacinia. Cras porta metus sit amet dolor imperdiet at mollis est malesuada. Nulla ligula dolor, porta vel odio. Sed sodales nulla blandit mauris commodo eu varius purus rhoncus. Nam imperdiet elementum egestas. Proin sapien metus, viverra quis tristique a, malesuada a nibh.</p>                                                                
                                
                                <blockquote>Nam et iaculis est. Phasellus nec tempor arcu. Praesent risus vitae eget facilisis tempus fermentum eget mauris semper.</blockquote>                                                                        
                                
                                <p>Nam et iaculis est. Phasellus nec tempor arcu. Praesent at risus vitae lacus facilisis tempus et sed tortor. Duis cursus sapien eget neque laoreet quis fermentum mauris semper. Nulla a diam quis tellus lobortis congue ut vitae massa, sed a ante eros.</p>
                                
                                <p>Donec lacinia aliquet porttitor. Pellentesque vel sem et dui sagittis aliquet. Ut et est eget augue tristique pharetra sit amet quis orci. Quisque elit sem, feugiat a auctor ac, congue vitae massa. Nulla convallis tortor eget ligula elementum in fringilla augue elementum. Ut bibendum accumsan nibh non fringilla. Fusce nec elementum enim. Duis condimentum cursus massa, elit bibendum turpis auctor elementum. Quisque ante felis, tincidunt vel iaculis non, volutpat non neque.</p>
                            </div>
                        </div>
                        
                        <div id="st_content_5" class="st_tab_view">
                            <h2>Horizontal Tab #5</h2>
                            
                            <div class="text">
                                <p>Lorem ipsum dolor sit amet, duis netus ut posuere feugiat arcu, purus wisi quis fringilla at, nunc ut eget elit duis erat praesent, ut fermentum lacus turpis cras. Justo gravida erat quam mauris purus, aliquam quisque, eget nisl. Pellentesque nibh duis odio morbi quam, scelerisque convallis aenean quam tincidunt ornare nam nec feugiat sodales tristique.</p>
                                
                                <blockquote><p>Aliquam commodo ullamcorper aenean erat. Nullam vel justo in neque porttitor eget laoreet. Aenean lacus adipiscing.</p></blockquote>
                                        
                                <p>Aliquam commodo ullamcorper erat. Nullam vel justo cras porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing nonummy, eget non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus tincidunt diam nec eget urna.</p>
                                
                                <p>Curabitur velit. Veniam donec orci viverra, lorem convallis in libero quisque, purus erat dolor curabitur, justo arcu nisl, natoque velit euismod dapibus nulla semper. Suspendisse odio tempor. Id ornare nam nec feugiat, ac consectetuer magna, dolor enim vel in, pulvinar bibendum ante ac, dui nibh dui est neque lacinia et. Duis netus ut posuere feugiat arcu, purus wisi quis fringilla at, nunc ut eget elit duis erat, eu praesent, ut fermentum lacus turpis cras. Justo gravida erat quam mauris purus, aliquam quisque, eget nisl. Pellentesque nibh ut odio morbi quam, scelerisque convallis tincidunt tristique.</p>
                            </div>
                        </div>
                        
                        <div id="st_content_6" class="st_tab_view">
                            <h2>Horizontal Tab #6</h2>
                            
                            <div class="text">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a tellus nec tellus volutpat interdum vel vel nisi. Vestibulum vestibulum porta ultrices. Suspendisse pharetra nisi eu orci sollicitudin nec suscipit tellus lacinia. Cras porta metus sit amet dolor imperdiet at mollis est malesuada. Nulla ligula dolor, porta vel odio. Sed sodales nulla blandit mauris commodo eu varius purus rhoncus. Nam imperdiet elementum egestas. Proin sapien metus, viverra quis tristique a, malesuada a nibh.</p>                                                                
                                
                                <blockquote>Nam et iaculis est. Phasellus nec tempor arcu. Praesent risus vitae eget facilisis tempus fermentum eget mauris semper.</blockquote>                                                                        
                                
                                <p>Nam et iaculis est. Phasellus nec tempor arcu. Praesent at risus vitae lacus facilisis tempus et sed tortor. Duis cursus sapien eget neque laoreet quis fermentum mauris semper. Nulla a diam quis tellus lobortis congue ut vitae massa, sed a ante eros.</p>
                                
                                <p>Donec lacinia aliquet porttitor. Pellentesque vel sem et dui sagittis aliquet. Ut et est eget augue tristique pharetra sit amet quis orci. Quisque elit sem, feugiat a auctor ac, congue vitae massa. Nulla convallis tortor eget ligula elementum in fringilla augue elementum. Ut bibendum accumsan nibh non fringilla. Fusce nec elementum enim. Duis condimentum cursus massa, elit bibendum turpis auctor elementum. Quisque ante felis, tincidunt vel iaculis non, volutpat non neque.</p>
                            </div>
                        </div>
                        
                        <div id="st_content_7" class="st_tab_view">
                            <h2>Horizontal Tab #7</h2>
                            
                            <div class="text">
                                <p>Lorem ipsum dolor sit amet, duis netus ut posuere feugiat arcu, purus wisi quis fringilla at, nunc ut eget elit duis erat praesent, ut fermentum lacus turpis cras. Justo gravida erat quam mauris purus, aliquam quisque, eget nisl. Pellentesque nibh duis odio morbi quam, scelerisque convallis aenean quam tincidunt ornare nam nec feugiat sodales tristique.</p>
                                
                                <blockquote><p>Aliquam commodo ullamcorper aenean erat. Nullam vel justo in neque porttitor eget laoreet. Aenean lacus adipiscing.</p></blockquote>
                                        
                                <p>Aliquam commodo ullamcorper erat. Nullam vel justo cras porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing nonummy, eget non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus tincidunt diam nec eget urna.</p>
                                
                                <p>Curabitur velit. Veniam donec orci viverra, lorem convallis in libero quisque, purus erat dolor curabitur, justo arcu nisl, natoque velit euismod dapibus nulla semper. Suspendisse odio tempor. Id ornare nam nec feugiat, ac consectetuer magna, dolor enim vel in, pulvinar bibendum ante ac, dui nibh dui est neque lacinia et. Duis netus ut posuere feugiat arcu, purus wisi quis fringilla at, nunc ut eget elit duis erat, eu praesent, ut fermentum lacus turpis cras. Justo gravida erat quam mauris purus, aliquam quisque, eget nisl. Pellentesque nibh ut odio morbi quam, scelerisque convallis tincidunt tristique.</p>
                            </div>
                        </div>
                        
                        <div id="st_content_8" class="st_tab_view">
                            <h2>Horizontal Tab #8</h2>
                            
                            <div class="text">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a tellus nec tellus volutpat interdum vel vel nisi. Vestibulum vestibulum porta ultrices. Suspendisse pharetra nisi eu orci sollicitudin nec suscipit tellus lacinia. Cras porta metus sit amet dolor imperdiet at mollis est malesuada. Nulla ligula dolor, porta vel odio. Sed sodales nulla blandit mauris commodo eu varius purus rhoncus. Nam imperdiet elementum egestas. Proin sapien metus, viverra quis tristique a, malesuada a nibh.</p>                                                                
                                
                                <blockquote>Nam et iaculis est. Phasellus nec tempor arcu. Praesent risus vitae eget facilisis tempus fermentum eget mauris semper.</blockquote>                                                                        
                                
                                <p>Nam et iaculis est. Phasellus nec tempor arcu. Praesent at risus vitae lacus facilisis tempus et sed tortor. Duis cursus sapien eget neque laoreet quis fermentum mauris semper. Nulla a diam quis tellus lobortis congue ut vitae massa, sed a ante eros.</p>
                                
                                <p>Donec lacinia aliquet porttitor. Pellentesque vel sem et dui sagittis aliquet. Ut et est eget augue tristique pharetra sit amet quis orci. Quisque elit sem, feugiat a auctor ac, congue vitae massa. Nulla convallis tortor eget ligula elementum in fringilla augue elementum. Ut bibendum accumsan nibh non fringilla. Fusce nec elementum enim. Duis condimentum cursus massa, elit bibendum turpis auctor elementum. Quisque ante felis, tincidunt vel iaculis non, volutpat non neque.</p>
                            </div>
                        </div>
                        
                        <div id="st_content_9" class="st_tab_view">
                            <h2>Horizontal Tab #9</h2>
                            
                            <div class="text">
                                <p>Lorem ipsum dolor sit amet, duis netus ut posuere feugiat arcu, purus wisi quis fringilla at, nunc ut eget elit duis erat praesent, ut fermentum lacus turpis cras. Justo gravida erat quam mauris purus, aliquam quisque, eget nisl. Pellentesque nibh duis odio morbi quam, scelerisque convallis aenean quam tincidunt ornare nam nec feugiat sodales tristique.</p>
                                
                                <blockquote><p>Aliquam commodo ullamcorper aenean erat. Nullam vel justo in neque porttitor eget laoreet. Aenean lacus adipiscing.</p></blockquote>
                                        
                                <p>Aliquam commodo ullamcorper erat. Nullam vel justo cras porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing nonummy, eget non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus tincidunt diam nec eget urna.</p>
                                
                                <p>Curabitur velit. Veniam donec orci viverra, lorem convallis in libero quisque, purus erat dolor curabitur, justo arcu nisl, natoque velit euismod dapibus nulla semper. Suspendisse odio tempor. Id ornare nam nec feugiat, ac consectetuer magna, dolor enim vel in, pulvinar bibendum ante ac, dui nibh dui est neque lacinia et. Duis netus ut posuere feugiat arcu, purus wisi quis fringilla at, nunc ut eget elit duis erat, eu praesent, ut fermentum lacus turpis cras. Justo gravida erat quam mauris purus, aliquam quisque, eget nisl. Pellentesque nibh ut odio morbi quam, scelerisque convallis tincidunt tristique.</p>
                            </div>
                        </div>
                        
                        <div id="st_content_10" class="st_tab_view">
                            <h2>Horizontal Tab #10</h2>
                            
                            <div class="text">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a tellus nec tellus volutpat interdum vel vel nisi. Vestibulum vestibulum porta ultrices. Suspendisse pharetra nisi eu orci sollicitudin nec suscipit tellus lacinia. Cras porta metus sit amet dolor imperdiet at mollis est malesuada. Nulla ligula dolor, porta vel odio. Sed sodales nulla blandit mauris commodo eu varius purus rhoncus. Nam imperdiet elementum egestas. Proin sapien metus, viverra quis tristique a, malesuada a nibh.</p>                                                                
                                
                                <blockquote>Nam et iaculis est. Phasellus nec tempor arcu. Praesent risus vitae eget facilisis tempus fermentum eget mauris semper.</blockquote>                                                                        
                                
                                <p>Nam et iaculis est. Phasellus nec tempor arcu. Praesent at risus vitae lacus facilisis tempus et sed tortor. Duis cursus sapien eget neque laoreet quis fermentum mauris semper. Nulla a diam quis tellus lobortis congue ut vitae massa, sed a ante eros.</p>
                                
                                <p>Donec lacinia aliquet porttitor. Pellentesque vel sem et dui sagittis aliquet. Ut et est eget augue tristique pharetra sit amet quis orci. Quisque elit sem, feugiat a auctor ac, congue vitae massa. Nulla convallis tortor eget ligula elementum in fringilla augue elementum. Ut bibendum accumsan nibh non fringilla. Fusce nec elementum enim. Duis condimentum cursus massa, elit bibendum turpis auctor elementum. Quisque ante felis, tincidunt vel iaculis non, volutpat non neque.</p>
                            </div>
                        </div>
                    
                    </div> <!-- /.st_view -->
                 
                </div> <!-- /.st_view_container -->
                
                <!-- Start HTML - Customize tabs -->
                <div class="customize_container">
                
                    <ul class="customize">          
                        <li><p>Customize</p></li>                        
                        <li><a href="#add" class="add btn_enabled" title="Add tab">Add tab</a></li>           
                        <li><a href="#remove" class="remove btn_enabled" title="Remove tab">Remove tab</a></li>
                        <li><a href="#options" class="options btn_enabled" title="Options">Options</a></li>                        
                    </ul>
                    
                    <div class="options_box hide">                        
                        <input type="hidden" id="orientation" value="horizontal"  />
                        
                        <h2>Tab Options</h2>
                        
                        <ul class="opts_list">
                            <li>
                            	<h3>Alignment</h3>
                                <ul>
                                    <li><input type="radio" name="tabs_align" value="top" checked="checked" /><label>top</label></li>                                    
                                    <li><input type="radio" name="tabs_align" value="bottom" /><label>bottom</label></li>
                                </ul>
                            </li>
                            <li>
                                <h3>Animation speed:</h3>
                                <ul>
                                    <li><input type="radio" name="tabs_dur" value="600" /><label>slow</label></li>                                    
                                    <li><input type="radio" name="tabs_dur" value="300" checked="checked" /><label>normal</label></li>                                  
                                    <li><input type="radio" name="tabs_dur" value="200" /><label>fast</label></li>                                    
                                </ul>
                            </li>
                            <li>
                                <h3>Directional buttons:</h3>
                                <ul>
                                    <li><input type="radio" name="buttons" value="click" /><label>click tabs</label></li>                                    
                                    <li><input type="radio" name="buttons" value="slide" checked="checked" /><label>slide tabs</label></li>
                                </ul>
                            </li>
                            <li>                             
                                <h3>Easing effect:</h3>
                                <select class="tab_fx">
                                    <option value="" selected="selected">(none)</option>
                                    <option value="jswing">jswing</option>                                    
                                    <option value="easeInQuad">easeInQuad</option>
                                    <option value="easeOutQuad">easeOutQuad</option>
                                    <option value="easeInOutQuad">easeInOutQuad</option>
                                    <option value="easeInCubic">easeInCubic</option>
                                    <option value="easeOutCubic">easeOutCubic</option>
                                    <option value="easeInOutCubic">easeInOutCubic</option>
                                    <option value="easeInQuart">easeInQuart</option>
                                    <option value="easeOutQuart">easeOutQuart</option>
                                    <option value="easeInOutQuart">easeInOutQuart</option>
                                    <option value="easeInQuint">easeInQuint</option>
                                    <option value="easeOutQuint">easeOutQuint</option>
                                    <option value="easeInOutQuint">easeInOutQuint</option>
                                    <option value="easeInSine">easeInSine</option>
                                    <option value="easeOutSine">easeOutSine</option>
                                    <option value="easeInOutSine">easeInOutSine</option>
                                    <option value="easeInExpo">easeInExpo</option>
                                    <option value="easeOutExpo">easeOutExpo</option>
                                    <option value="easeInOutExpo">easeInOutExpo</option>
                                    <option value="easeInCirc">easeInCirc</option>
                                    <option value="easeOutCirc">easeOutCirc</option>
                                    <option value="easeInOutCirc">easeInOutCirc</option>
                                    <option value="easeInElastic">easeInElastic</option>
                                    <option value="easeOutElastic">easeOutElastic</option>
                                    <option value="easeInOutElastic">easeInOutElastic</option>
                                    <option value="easeInBack">easeInBack</option>
                                    <option value="easeOutBack">easeOutBack</option>
                                    <option value="easeInOutBack">easeInOutBack</option>
                                    <option value="easeInBounce">easeInBounce</option>
                                    <option value="easeOutBounce">easeOutBounce</option>
                                    <option value="easeInOutBounce">easeInOutBounce</option>
                                </select>
                            </li>
                            <li>
                                <h3>Scroll wheel:</h3>
                                <ul>
                                    <li><input type="radio" name="scroll" value="true" checked="checked" /><label>enabled</label></li>                                    
                                    <li><input type="radio" name="scroll" value="false" /><label>disabled</label></li>
                                </ul>
                            </li>                            
                        </ul>
                        
                        <h2 class="content">Content Options</h2>
                        
                        <ul class="opts_list">                                                           
                            <li>
                            	<h3>Animation speed:</h3>
                                <ul>                                   
                                    <li><input type="radio" name="cont_dur" value="900" /><label>slow</label></li>                                    
                                    <li><input type="radio" name="cont_dur" value="600" checked="checked" /><label>normal</label></li>                                   
                                    <li><input type="radio" name="cont_dur" value="400" /><label>fast</label></li>
                                </ul>
                            </li>
                            <li>
                                <h3>Animation type:</h3>
                                <select class="cont_anim">
                                    <option value="">(none)</option>
                                    <option value="fade">fade</option>
                                    <option value="fadeOutIn">fadeOutIn</option>
                                    <option value="slideH" selected="selected">slideHorizontal</option>
                                    <option value="slideV">slideVertical</option>                                    
                                </select>                                
                            </li>                                                      
                            <li>
                                <h3>Easing effect:</h3>
                                <select class="cont_fx">
                                	<option value="">(none)</option>
                                    <option value="jswing">jswing</option>                                    
                                    <option value="easeInQuad">easeInQuad</option>
                                    <option value="easeOutQuad">easeOutQuad</option>
                                    <option value="easeInOutQuad">easeInOutQuad</option>
                                    <option value="easeInCubic">easeInCubic</option>
                                    <option value="easeOutCubic">easeOutCubic</option>
                                    <option value="easeInOutCubic">easeInOutCubic</option>
                                    <option value="easeInQuart">easeInQuart</option>
                                    <option value="easeOutQuart">easeOutQuart</option>
                                    <option value="easeInOutQuart">easeInOutQuart</option>
                                    <option value="easeInQuint">easeInQuint</option>
                                    <option value="easeOutQuint">easeOutQuint</option>
                                    <option value="easeInOutQuint">easeInOutQuint</option>
                                    <option value="easeInSine">easeInSine</option>
                                    <option value="easeOutSine">easeOutSine</option>
                                    <option value="easeInOutSine">easeInOutSine</option>
                                    <option value="easeInExpo">easeInExpo</option>
                                    <option value="easeOutExpo">easeOutExpo</option>
                                    <option value="easeInOutExpo" selected="selected">easeInOutExpo</option>
                                    <option value="easeInCirc">easeInCirc</option>
                                    <option value="easeOutCirc">easeOutCirc</option>
                                    <option value="easeInOutCirc">easeInOutCirc</option>
                                    <option value="easeInElastic">easeInElastic</option>
                                    <option value="easeOutElastic">easeOutElastic</option>
                                    <option value="easeInOutElastic">easeInOutElastic</option>
                                    <option value="easeInBack">easeInBack</option>
                                    <option value="easeOutBack">easeOutBack</option>
                                    <option value="easeInOutBack">easeInOutBack</option>
                                    <option value="easeInBounce">easeInBounce</option>
                                    <option value="easeOutBounce">easeOutBounce</option>
                                    <option value="easeInOutBounce">easeInOutBounce</option>                                
                                </select>
                            </li>
                        </ul>
                        
                        <div class="save_cont">
                        	<a href="#save" class="save_btn" title="Apply Options">Apply Options</a>
                        </div>
                    </div> <!-- /.options_box -->
                
                </div> <!-- /.customize_continer -->
                <!-- End HTML - Customize tabs -->                           
            
            </div> <!-- /#st_horizontal -->        
            <!-- End HTML - Horizontal tabs -->               
        
        </div> <!-- /.column -->             
        
        <div class="column">
        
            <h1>Vertical demo</h1>
            
            <!-- Start HTML - Vertical tabs -->
            <div id="st_vertical" class="st_vertical">
                                
                <div class="st_tabs_container">
                                                           
                    <a href="#prev" class="st_prev"></a>
                    <a href="#next" class="st_next"></a>
                                                                                                         
                    <div class="st_slide_container">
                    
                        <ul class="st_tabs">
                            <li><a href="#stv_content_1" rel="v_tab_1" class="st_tab st_tab_active">Vertical Tab #1<span>Lorem ipsum dolor sit amet</span></a></li>
                            <li><a href="#stv_content_2" rel="v_tab_2" class="st_tab">Vertical Tab #2<span>Lorem ipsum dolor sit amet</span></a></li>                                    
                            <li><a href="#stv_content_3" rel="v_tab_3" class="st_tab">Vertical Tab #3<span>Lorem ipsum dolor sit amet</span></a></li>
                            <li><a href="#stv_content_4" rel="v_tab_4" class="st_tab">Vertical Tab #4<span>Lorem ipsum dolor sit amet</span></a></li>
                            <li><a href="#stv_content_5" rel="v_tab_5" class="st_tab">Vertical Tab #5<span>Lorem ipsum dolor sit amet</span></a></li>
                            <li><a href="#stv_content_6" rel="v_tab_6" class="st_tab">Vertical Tab #6<span>Lorem ipsum dolor sit amet</span></a></li>
                            <li><a href="#stv_content_7" rel="v_tab_7" class="st_tab">Vertical Tab #7<span>Lorem ipsum dolor sit amet</span></a></li>
                            <li><a href="#stv_content_8" rel="v_tab_8" class="st_tab">Vertical Tab #8<span>Lorem ipsum dolor sit amet</span></a></li>
                            <li><a href="#stv_content_9" rel="v_tab_9" class="st_tab">Vertical Tab #9<span>Lorem ipsum dolor sit amet</span></a></li>
                            <li><a href="#stv_content_10" rel="v_tab_10" class="st_tab">Vertical Tab #10<span>Lorem ipsum dolor sit amet</span></a></li>                                      
                        </ul>
                        
                    </div> <!-- /.st_slide_container -->
                
                </div> <!-- /.st_tabs_container -->                               
                
                <div class="st_view_container">
                
                    <div class="st_view">
                                
                        <div id="stv_content_1" class="st_tab_view st_first_tab_view">
                            <h2>Vertical Tab #1</h2>
                            
                            <div class="text">                                                                                                   
                                <p>Lorem ipsum dolor sit amet, duis netus ut posuere feugiat arcu, purus wisi quis fringilla at, nunc ut eget elit duis erat, eu praesent, ut fermentum lacus turpis cras. Justo gravida erat quam praesent purus, aliquam quisque, eget nisl. Pellentesque scelerisque convallis tincidunt tristique.</p>
                                
                                <blockquote><p>Aliquam commodo arcu libero. Nullam justo neque porttitor laoreet. Aenean adipiscing nisi.</p></blockquote>
                                        
                                <p>Aliquam commodo ullamcorper erat. Nullam justo in neque porttitor laoreet. Aenean lacus consequat adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare, massa.</p>
                                
                                <p>Curabitur velit. Veniam donec orci viverra, lorem convallis in libero quisque, purus erat dolor, justo arcu nisl, et natoque velit euismod dapibus nulla semper. Suspendisse odio tempor. Id ornare nam nec feugiat, ac consectetuer magna, dolor enim vel in, pulvinar bibendum ante ac, dui nibh dui est neque lacinia et. Duis netus ut posuere feugiat arcu, purus wisi quis fringilla at, nunc ut eget elit duis erat, eu praesent, ut fermentum lacus turpis cras. Justo gravida erat quam mauris, aliquam quisque, eget nisl. Pellentesque nibh ut tristique.</p>
                            </div>                            
                        </div>
                        
                        <div id="stv_content_2" class="st_tab_view">
                            <h2>Vertical Tab #2</h2>
                            
                            <div class="text">                                
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porttitor lacus. Fringilla accumsan ultrices, molestie at purus. Nulla volutpat consectetur sapien, non semper libero feugiat sed. Donec laoreet suscipit nisi, ut varius elit ultrices eget. Vivamus eget quam nibh. Ut porttitor odio auctor sit amet gravida nec, aliquet vel nisl. Sed feugiat lorem quis odio viverra pharetra.</p>
                                
                                <blockquote><p>Aenean congue magna feugiat nunc gravida congue enim. Cursus dui commodo aliquam.</p></blockquote>
                                        
                                <p>Aenean fermentum magna feugiat nunc gravida cras congue, enim ut cursus commodo, erat nibh imperdiet nibh, vel malesuada neque lectus lacus maecenas non commodo turpis.</p>
                                
                                <p>Praesent arcu erat, venenatis sagittis porta ut, aliquam eu tellus. Sed tempor metus aliquam porta. Praesent faucibus sodales dolor, et vulputate lacus vulputate sagittis. Suspendisse potenti. In vel tortor ante. Curabitur ultrices convallis nulla, a lobortis nibh auctor sed. In hac habitasse platea dictumst. Integer luctus mattis orci, id fermentum leo tristique vitae. Duis at tellus iaculis nisl fringilla lobortis. Curabitur dolor risus, imperdiet a tincidunt pretium.</p>                                                                                              
                            </div>
                        </div>
                        
                        <div id="stv_content_3" class="st_tab_view">
                            <h2>Vertical Tab #3</h2>
                            
                            <div class="text">
                                <p>Lorem ipsum dolor sit amet, duis netus ut posuere feugiat arcu, purus wisi quis fringilla at, nunc ut eget elit duis erat, eu praesent, ut fermentum lacus turpis cras. Justo gravida erat quam praesent purus, aliquam quisque, eget nisl. Pellentesque scelerisque convallis tincidunt tristique.</p>
                                
                                <blockquote><p>Aliquam commodo arcu libero. Nullam justo neque porttitor laoreet. Aenean adipiscing nisi.</p></blockquote>
                                        
                                <p>Aliquam commodo ullamcorper erat. Nullam justo in neque porttitor laoreet. Aenean lacus consequat adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare, massa.</p>
                                
                                <p>Curabitur velit. Veniam donec orci viverra, lorem convallis in libero quisque, purus erat dolor, justo arcu nisl, et natoque velit euismod dapibus nulla semper. Suspendisse odio tempor. Id ornare nam nec feugiat, ac consectetuer magna, dolor enim vel in, pulvinar bibendum ante ac, dui nibh dui est neque lacinia et. Duis netus ut posuere feugiat arcu, purus wisi quis fringilla at, nunc ut eget elit duis erat, eu praesent, ut fermentum lacus turpis cras. Justo gravida erat quam mauris, aliquam quisque, eget nisl. Pellentesque nibh ut tristique.</p>
                            </div>
                        </div>
                        
                        <div id="stv_content_4" class="st_tab_view">
                            <h2>Vertical Tab #4</h2>
                            
                            <div class="text">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porttitor lacus. Fringilla accumsan ultrices, molestie at purus. Nulla volutpat consectetur sapien, non semper libero feugiat sed. Donec laoreet suscipit nisi, ut varius elit ultrices eget. Vivamus eget quam nibh. Ut porttitor odio auctor sit amet gravida nec, aliquet vel nisl. Sed feugiat lorem quis odio viverra pharetra.</p>
                                
                                <blockquote><p>Aenean congue magna feugiat nunc gravida congue enim. Cursus dui commodo aliquam.</p></blockquote>
                                        
                                <p>Aenean fermentum magna feugiat nunc gravida cras congue, enim ut cursus commodo, erat nibh imperdiet nibh, vel malesuada neque lectus lacus maecenas non commodo turpis.</p>
                                
                                <p>Praesent arcu erat, venenatis sagittis porta ut, aliquam eu tellus. Sed tempor metus aliquam porta. Praesent faucibus sodales dolor, et vulputate lacus vulputate sagittis. Suspendisse potenti. In vel tortor ante. Curabitur ultrices convallis nulla, a lobortis nibh auctor sed. In hac habitasse platea dictumst. Integer luctus mattis orci, id fermentum leo tristique vitae. Duis at tellus iaculis nisl fringilla lobortis. Curabitur dolor risus, imperdiet a tincidunt pretium.</p>
                            </div>
                        </div>
                        
                        <div id="stv_content_5" class="st_tab_view">
                            <h2>Vertical Tab #5</h2>
                            
                            <div class="text">
                                <p>Lorem ipsum dolor sit amet, duis netus ut posuere feugiat arcu, purus wisi quis fringilla at, nunc ut eget elit duis erat, eu praesent, ut fermentum lacus turpis cras. Justo gravida erat quam praesent purus, aliquam quisque, eget nisl. Pellentesque scelerisque convallis tincidunt tristique.</p>
                                
                                <blockquote><p>Aliquam commodo arcu libero. Nullam justo neque porttitor laoreet. Aenean adipiscing nisi.</p></blockquote>
                                        
                                <p>Aliquam commodo ullamcorper erat. Nullam justo in neque porttitor laoreet. Aenean lacus consequat adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare, massa.</p>
                                
                                <p>Curabitur velit. Veniam donec orci viverra, lorem convallis in libero quisque, purus erat dolor, justo arcu nisl, et natoque velit euismod dapibus nulla semper. Suspendisse odio tempor. Id ornare nam nec feugiat, ac consectetuer magna, dolor enim vel in, pulvinar bibendum ante ac, dui nibh dui est neque lacinia et. Duis netus ut posuere feugiat arcu, purus wisi quis fringilla at, nunc ut eget elit duis erat, eu praesent, ut fermentum lacus turpis cras. Justo gravida erat quam mauris, aliquam quisque, eget nisl. Pellentesque nibh ut tristique.</p>
                            </div>
                        </div>
                        
                        <div id="stv_content_6" class="st_tab_view">
                            <h2>Vertical Tab #6</h2>
                            
                            <div class="text">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porttitor lacus. Fringilla accumsan ultrices, molestie at purus. Nulla volutpat consectetur sapien, non semper libero feugiat sed. Donec laoreet suscipit nisi, ut varius elit ultrices eget. Vivamus eget quam nibh. Ut porttitor odio auctor sit amet gravida nec, aliquet vel nisl. Sed feugiat lorem quis odio viverra pharetra.</p>
                                
                                <blockquote><p>Aenean congue magna feugiat nunc gravida congue enim. Cursus dui commodo aliquam.</p></blockquote>
                                        
                                <p>Aenean fermentum magna feugiat nunc gravida cras congue, enim ut cursus commodo, erat nibh imperdiet nibh, vel malesuada neque lectus lacus maecenas non commodo turpis.</p>
                                
                                <p>Praesent arcu erat, venenatis sagittis porta ut, aliquam eu tellus. Sed tempor metus aliquam porta. Praesent faucibus sodales dolor, et vulputate lacus vulputate sagittis. Suspendisse potenti. In vel tortor ante. Curabitur ultrices convallis nulla, a lobortis nibh auctor sed. In hac habitasse platea dictumst. Integer luctus mattis orci, id fermentum leo tristique vitae. Duis at tellus iaculis nisl fringilla lobortis. Curabitur dolor risus, imperdiet a tincidunt pretium.</p>
                            </div>
                        </div>
                        
                        <div id="stv_content_7" class="st_tab_view">
                            <h2>Vertical Tab #7</h2>
                            
                            <div class="text">
                                <p>Lorem ipsum dolor sit amet, duis netus ut posuere feugiat arcu, purus wisi quis fringilla at, nunc ut eget elit duis erat, eu praesent, ut fermentum lacus turpis cras. Justo gravida erat quam praesent purus, aliquam quisque, eget nisl. Pellentesque scelerisque convallis tincidunt tristique.</p>
                                
                                <blockquote><p>Aliquam commodo arcu libero. Nullam justo neque porttitor laoreet. Aenean adipiscing nisi.</p></blockquote>
                                        
                                <p>Aliquam commodo ullamcorper erat. Nullam justo in neque porttitor laoreet. Aenean lacus consequat adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare, massa.</p>
                                
                                <p>Curabitur velit. Veniam donec orci viverra, lorem convallis in libero quisque, purus erat dolor, justo arcu nisl, et natoque velit euismod dapibus nulla semper. Suspendisse odio tempor. Id ornare nam nec feugiat, ac consectetuer magna, dolor enim vel in, pulvinar bibendum ante ac, dui nibh dui est neque lacinia et. Duis netus ut posuere feugiat arcu, purus wisi quis fringilla at, nunc ut eget elit duis erat, eu praesent, ut fermentum lacus turpis cras. Justo gravida erat quam mauris, aliquam quisque, eget nisl. Pellentesque nibh ut tristique.</p>
                            </div>
                        </div>
                        
                        <div id="stv_content_8" class="st_tab_view">
                            <h2>Vertical Tab #8</h2>
                            
                            <div class="text">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porttitor lacus. Fringilla accumsan ultrices, molestie at purus. Nulla volutpat consectetur sapien, non semper libero feugiat sed. Donec laoreet suscipit nisi, ut varius elit ultrices eget. Vivamus eget quam nibh. Ut porttitor odio auctor sit amet gravida nec, aliquet vel nisl. Sed feugiat lorem quis odio viverra pharetra.</p>
                                
                                <blockquote><p>Aenean congue magna feugiat nunc gravida congue enim. Cursus dui commodo aliquam.</p></blockquote>
                                        
                                <p>Aenean fermentum magna feugiat nunc gravida cras congue, enim ut cursus commodo, erat nibh imperdiet nibh, vel malesuada neque lectus lacus maecenas non commodo turpis.</p>
                                
                                <p>Praesent arcu erat, venenatis sagittis porta ut, aliquam eu tellus. Sed tempor metus aliquam porta. Praesent faucibus sodales dolor, et vulputate lacus vulputate sagittis. Suspendisse potenti. In vel tortor ante. Curabitur ultrices convallis nulla, a lobortis nibh auctor sed. In hac habitasse platea dictumst. Integer luctus mattis orci, id fermentum leo tristique vitae. Duis at tellus iaculis nisl fringilla lobortis. Curabitur dolor risus, imperdiet a tincidunt pretium.</p>
                            </div>
                        </div>
                        
                        <div id="stv_content_9" class="st_tab_view">
                            <h2>Vertical Tab #9</h2>
                            
                            <div class="text">
                                <p>Lorem ipsum dolor sit amet, duis netus ut posuere feugiat arcu, purus wisi quis fringilla at, nunc ut eget elit duis erat, eu praesent, ut fermentum lacus turpis cras. Justo gravida erat quam praesent purus, aliquam quisque, eget nisl. Pellentesque scelerisque convallis tincidunt tristique.</p>
                                
                                <blockquote><p>Aliquam commodo arcu libero. Nullam justo neque porttitor laoreet. Aenean adipiscing nisi.</p></blockquote>
                                        
                                <p>Aliquam commodo ullamcorper erat. Nullam justo in neque porttitor laoreet. Aenean lacus consequat adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare, massa.</p>
                                
                                <p>Curabitur velit. Veniam donec orci viverra, lorem convallis in libero quisque, purus erat dolor, justo arcu nisl, et natoque velit euismod dapibus nulla semper. Suspendisse odio tempor. Id ornare nam nec feugiat, ac consectetuer magna, dolor enim vel in, pulvinar bibendum ante ac, dui nibh dui est neque lacinia et. Duis netus ut posuere feugiat arcu, purus wisi quis fringilla at, nunc ut eget elit duis erat, eu praesent, ut fermentum lacus turpis cras. Justo gravida erat quam mauris, aliquam quisque, eget nisl. Pellentesque nibh ut tristique.</p>
                            </div>
                        </div>
                        
                        <div id="stv_content_10" class="st_tab_view">
                            <h2>Vertical Tab #10</h2>
                            
                            <div class="text">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porttitor lacus. Fringilla accumsan ultrices, molestie at purus. Nulla volutpat consectetur sapien, non semper libero feugiat sed. Donec laoreet suscipit nisi, ut varius elit ultrices eget. Vivamus eget quam nibh. Ut porttitor odio auctor sit amet gravida nec, aliquet vel nisl. Sed feugiat lorem quis odio viverra pharetra.</p>
                                
                                <blockquote><p>Aenean congue magna feugiat nunc gravida congue enim. Cursus dui commodo aliquam.</p></blockquote>
                                        
                                <p>Aenean fermentum magna feugiat nunc gravida cras congue, enim ut cursus commodo, erat nibh imperdiet nibh, vel malesuada neque lectus lacus maecenas non commodo turpis.</p>
                                
                                <p>Praesent arcu erat, venenatis sagittis porta ut, aliquam eu tellus. Sed tempor metus aliquam porta. Praesent faucibus sodales dolor, et vulputate lacus vulputate sagittis. Suspendisse potenti. In vel tortor ante. Curabitur ultrices convallis nulla, a lobortis nibh auctor sed. In hac habitasse platea dictumst. Integer luctus mattis orci, id fermentum leo tristique vitae. Duis at tellus iaculis nisl fringilla lobortis. Curabitur dolor risus, imperdiet a tincidunt pretium.</p>
                            </div>
                        </div>
                    
                    </div> <!-- /.st_view --> 
                 
                </div> <!-- /.st_view_container -->
                
                <!-- Start HTML - Customize tabs -->
                <div class="customize_container">
                
                    <ul class="customize">          
                        <li><p>Customize</p></li>
                        <li><a href="#add" class="add btn_enabled" title="Add tab">Add tab</a></li>           
                        <li><a href="#remove" class="remove btn_enabled" title="Remove tab">Remove tab</a></li>
                        <li><a href="#options" class="options btn_enabled" title="Options">Options</a></li>             
                    </ul>
                    
                    <div class="options_box hide">                                                
                        
                        <h2>Tab Options</h2>
                        
                        <ul class="opts_list">                            
                            <li>
                            	<h3>Alignment</h3>
                                <ul>
                                    <li><input type="radio" name="v_tabs_align" value="left" checked="checked" /><label>left</label></li>                                    
                                    <li><input type="radio" name="v_tabs_align" value="right" /><label>right</label></li>
                                </ul>
                            </li>
                            <li>
                                <h3>Animation speed:</h3>
                                <ul>
                                    <li><input type="radio" name="v_tabs_dur" value="600" /><label>slow</label></li>                                    
                                    <li><input type="radio" name="v_tabs_dur" value="300" checked="checked" /><label>normal</label></li>                                  
                                    <li><input type="radio" name="v_tabs_dur" value="200" /><label>fast</label></li>                                    
                                </ul>
                            </li>
                            <li>
                                <h3>Directional buttons:</h3>
                                <ul>
                                    <li><input type="radio" name="v_buttons" value="click" /><label>click tabs</label></li>                                    
                                    <li><input type="radio" name="v_buttons" value="slide" checked="checked" /><label>slide tabs</label></li>
                                </ul>
                            </li>                            
                            <li>                             
                                <h3>Easing effect:</h3>
                                <select class="tab_fx">
                                    <option value="" selected="selected">(none)</option>
                                    <option value="jswing">jswing</option>                                    
                                    <option value="easeInQuad">easeInQuad</option>
                                    <option value="easeOutQuad">easeOutQuad</option>
                                    <option value="easeInOutQuad">easeInOutQuad</option>
                                    <option value="easeInCubic">easeInCubic</option>
                                    <option value="easeOutCubic">easeOutCubic</option>
                                    <option value="easeInOutCubic">easeInOutCubic</option>
                                    <option value="easeInQuart">easeInQuart</option>
                                    <option value="easeOutQuart">easeOutQuart</option>
                                    <option value="easeInOutQuart">easeInOutQuart</option>
                                    <option value="easeInQuint">easeInQuint</option>
                                    <option value="easeOutQuint">easeOutQuint</option>
                                    <option value="easeInOutQuint">easeInOutQuint</option>
                                    <option value="easeInSine">easeInSine</option>
                                    <option value="easeOutSine">easeOutSine</option>
                                    <option value="easeInOutSine">easeInOutSine</option>
                                    <option value="easeInExpo">easeInExpo</option>
                                    <option value="easeOutExpo">easeOutExpo</option>
                                    <option value="easeInOutExpo">easeInOutExpo</option>
                                    <option value="easeInCirc">easeInCirc</option>
                                    <option value="easeOutCirc">easeOutCirc</option>
                                    <option value="easeInOutCirc">easeInOutCirc</option>
                                    <option value="easeInElastic">easeInElastic</option>
                                    <option value="easeOutElastic">easeOutElastic</option>
                                    <option value="easeInOutElastic">easeInOutElastic</option>
                                    <option value="easeInBack">easeInBack</option>
                                    <option value="easeOutBack">easeOutBack</option>
                                    <option value="easeInOutBack">easeInOutBack</option>
                                    <option value="easeInBounce">easeInBounce</option>
                                    <option value="easeOutBounce">easeOutBounce</option>
                                    <option value="easeInOutBounce">easeInOutBounce</option>
                                </select>
                            </li>
                            <li>
                                <h3>Scroll wheel:</h3>
                                <ul>
                                    <li><input type="radio" name="v_scroll" value="true" checked="checked" /><label>enabled</label></li>                                    
                                    <li><input type="radio" name="v_scroll" value="false" /><label>disabled</label></li>
                                </ul>
                            </li>
                        </ul>
                        
                        <h2 class="content">Content Options</h2>
                        
                        <ul class="opts_list">                                      
                            <li>
                            	<h3>Animation speed:</h3>
                                <ul>
                                    <li><input type="radio" name="v_cont_dur" value="900" /><label>slow</label></li>                                    
                                    <li><input type="radio" name="v_cont_dur" value="600" checked="checked" /><label>normal</label></li>                                   
                                    <li><input type="radio" name="v_cont_dur" value="400" /><label>fast</label></li>
                                </ul>
                            </li>
                            <li>
                                <h3>Animation type:</h3>
                                <select class="cont_anim">
                                    <option value="">(none)</option>
                                    <option value="fade">fade</option>
                                    <option value="fadeOutIn">fadeOutIn</option>
                                    <option value="slideH" selected="selected">slideHorizontal</option>
                                    <option value="slideV">slideVertical</option>                                 
                                </select>                                
                            </li>                                                     
                            <li>
                                <h3>Easing effect:</h3>
                                <select class="cont_fx">
                                	<option value="">(none)</option>
                                    <option value="jswing">jswing</option>                                    
                                    <option value="easeInQuad">easeInQuad</option>
                                    <option value="easeOutQuad">easeOutQuad</option>
                                    <option value="easeInOutQuad">easeInOutQuad</option>
                                    <option value="easeInCubic">easeInCubic</option>
                                    <option value="easeOutCubic">easeOutCubic</option>
                                    <option value="easeInOutCubic">easeInOutCubic</option>
                                    <option value="easeInQuart">easeInQuart</option>
                                    <option value="easeOutQuart">easeOutQuart</option>
                                    <option value="easeInOutQuart">easeInOutQuart</option>
                                    <option value="easeInQuint">easeInQuint</option>
                                    <option value="easeOutQuint">easeOutQuint</option>
                                    <option value="easeInOutQuint">easeInOutQuint</option>
                                    <option value="easeInSine">easeInSine</option>
                                    <option value="easeOutSine">easeOutSine</option>
                                    <option value="easeInOutSine">easeInOutSine</option>
                                    <option value="easeInExpo">easeInExpo</option>
                                    <option value="easeOutExpo">easeOutExpo</option>
                                    <option value="easeInOutExpo" selected="selected">easeInOutExpo</option>
                                    <option value="easeInCirc">easeInCirc</option>
                                    <option value="easeOutCirc">easeOutCirc</option>
                                    <option value="easeInOutCirc">easeInOutCirc</option>
                                    <option value="easeInElastic">easeInElastic</option>
                                    <option value="easeOutElastic">easeOutElastic</option>
                                    <option value="easeInOutElastic">easeInOutElastic</option>
                                    <option value="easeInBack">easeInBack</option>
                                    <option value="easeOutBack">easeOutBack</option>
                                    <option value="easeInOutBack">easeInOutBack</option>
                                    <option value="easeInBounce">easeInBounce</option>
                                    <option value="easeOutBounce">easeOutBounce</option>
                                    <option value="easeInOutBounce">easeInOutBounce</option>                                
                                </select>
                            </li>
                        </ul>
                        
                        <div class="save_cont">
                        	<a href="#save" class="save_btn" title="Apply Options">Apply Options</a>
                        </div>
                    </div> <!-- /.options_box -->
                
                </div> <!-- /.customize_continer -->
                <!-- End HTML - Customize tabs -->                    	            
            
            </div> <!-- /#st_vertical -->                    
            <!-- End HTML - Vertical tabs -->                
        
        </div> <!-- /.column -->                                              
        
        <div id="features">
        
        	<h1>What can it do?</h1>
            
            <ul>
            	<li>
                	<h3>Scroll any number of tabs</h3>
                	Unlimited number of tabs and no size limits.
                </li>                
                <li>
                	<h3>Multiple transitions for the content</h3>
                	fade, slide horizontal and vertical (no effect is also possible).                   
                </li>                                             
                <li>
                	<h3>Easing plugin for sliding effects</h3>
                    Just include the Easing plugin and specify the easing effect.
                </li>                
                <li>
                	<h3>Auto height adjustment</h3>
                    Useful for content with varying height.
                </li>
                <li>
                	<h3>Multiple instances</h3>
                    The tabs can be included multiple times on the same page.
                </li>
                <li>
                	<h3>Open tabs via external links or the URL</h3>
                    The tabs can be linked to anywhere on the page.
                </li>   
                <li>
                	<h3>Lightweight</h3>
                    The packed script weighs only 6kb.
                </li>                                                               
            </ul>
            
            <ul class="f_right">                            
                <li>
                	<h3>Use the mouse scroll wheel to slide the tabs</h3>
                	Can be disabled if desired.
                </li>                
                <li>
                	<h3>Autoplay support</h3>
                    Interval time can be set in the options. 
                </li>
                <li>
                	<h3>Save the active/current tab state</h3>
                    If enabled, the last tab clicked will be saved with a cookie.
                </li>
                <li>
                	<h3>Navigates to the 'active' tab on page load</h3> 
                    Active class name can be changed in the options.
                </li>    
                <li>
                	<h3>Auto deactivates and hides the directional buttons</h3> 
                    Set the styling with CSS.
                </li>                 
                <li>
                	<h3>Fully customizable</h3>
                    Fully customizable with CSS.
                </li>
                <li>
                	<h3>Compatible with all browsers</h3>
                    Including IE6.
                </li>
            </ul>
        
        </div> <!-- /#features -->
        
        <div id="docs">
                	
            <div id="setup">
            
                <h1>How to use?</h1>
            
                <h2><strong>Step 1</strong> - Include the scripts</h2>
                
                    <p>Include the Javascript files in the <code>&lt;head&gt;</code> of your HTML document, and change the <code>src="your-path/"</code> to the location of your files. The code below loads <a href="http://code.google.com/intl/en/apis/ajaxlibs/documentation/#jquery">jQuery from Google</a>, but you can include your own copy instead if you want. The <a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing Plugin</a> is required for <em>easing effects</em>, and the <a href="http://brandonaaron.net/code/mousewheel/docs">jQuery Mousewheel Plugin</a> is required for <em>mouse wheel scrolling</em>.</p>                                      
                    
<pre><code class="html">&lt;script type=&quot;text/javascript&quot; src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;your-path/jquery.mousewheel.min.js&quot;&gt;&lt;/script&gt; &lt;!-- Optional --&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;your-path/jquery.easing.1.3.js&quot;&gt;&lt;/script&gt; &lt;!-- Optional --&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;your-path/jquery.slidingtabs.pack.js&quot;&gt;&lt;/script&gt;</code></pre>
            
                <h2><strong>Step 2</strong> - Create the HTML and CSS</h2>                                    
                    
                    <p>You can get the HTML and CSS for the horizontal and vertical demos from the links below:</p>
                    
                    <ul class="markup">
                    	<li><strong>Horizontal tabs:</strong> <a href="horizontal.html">HTML</a> &amp; <a href="css/slidingtabs-horizontal.css">CSS</a></li>
                    	<li><strong>Vertical tabs:</strong> <a href="vertical.html">HTML</a> &amp; <a href="css/slidingtabs-vertical.css">CSS</a></li>
                    </ul>
                    
                    <p>Place the CSS code in your stylesheet or create a separate one and include it in your document <code>&lt;head&gt;</code> <em>before</em> the Javascript.</p>
                
<pre><code class="html">&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;your-path/style.css&quot; /&gt;</code></pre>
                                                                          
                    <h3><strong>Customizing the tabs</strong> - The tabs can be customized any way you want. A few things to note is:</h3>                                        
                    
                    <ul class="notes">                        
                        <li>Some CSS classes are predefined and needed for the sliding tabs to work. If you want to rename any of these classes remember to change them in the <a href="#opts">options</a> as well (see <strong>step 3</strong> below for more info on how to define options).</li>                        
                        <li>Each tab (<code>&lt;a&gt;</code> tag) has an <code>href</code> attribute that matches the <code>id</code> of a <code>&lt;div class="st_tab_view" /&gt;</code> element. They can be called anything you want, as long as they match. This is how the correct content will show when a tab is clicked.</li>                        
                        <li>If you have content with different height, set the <a href="#cah"><code class="option">autoHeight</code></a> option to <code>true</code>. The content container element will then automatically adjust to your content.</li>
                        <li>Set the <a href="#orient"><code class="option">orientation</code></a> option to <code>'vertical'</code> if you use vertical tabs. The default is <code>'horizontal'</code>.</li>
                    </ul>                                        
                
                <h2><strong>Step 3</strong> - Activate the plugin</h2>
                
                	<p>As you can see from the <a href="#intro">demos</a> above, you can have multiple tab instances on a single page. Just include the code below in the <code>&lt;head&gt;</code> of your HTML document, <em>after</em> the scripts. Specify wich element contains your tabs and define any options you want.</p>
                    <p>Repeat this step specifying your next tab container element if you want <em>multiple instances.</em></p>
                    
<pre><code class="html">&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {

    // Vertical tabs example
    $(&#x27;#your_tabs_id&#x27;).slideTabs({
        // Your options here        
        contentAnim: 'slideV',
        contentAnimTime: 600,
        contentEasing: 'easeInOutExpo',
        orientation: 'vertical',
        tabsAnimTime: 300
    });

});
&lt;/script&gt;</code></pre>

			<br /><br />
            
            <h2><strong>Changing the tabs position</strong></h2>
                    
            <p>By adding a class to the tabs main container you can change the position of the tabs:</p>                    
            <pre><code class="html">&lt;div id=&quot;st_horizontal&quot; class=&quot;st_horizontal <span style="color:#FFF;">align_bottom</span>&quot; /&gt;</code></pre>                                        
            <br />
            <p>For horizontal tabs add the class: <code>align_bottom</code> and for vertical tabs add the class: <code>align_right</code>.</p>                        
            
            <h2><strong>External linking</strong></h2>
            
            <p>You can link directly to any tab by adding links anywhere on the page. Below is an example of how its done:</p>                                    
            <pre><code class="html">&lt;a href=&quot;#tab_2&quot; class=&quot;st_ext&quot; rel=&quot;st_horizontal&quot; /&gt;</code></pre>                                          
            <br />
            <p>The <code>href</code> attribute should match the <code>rel</code> attribute of the tab you want to open. Each external link must have the <code>.st_ext</code> class, but the name can be changed in the <a href="#opts">options</a>. And finally the <code>rel</code> attribute should match the <code>id</code> of the tabs you want to target, in this case the horizontal tabs.</p>
            
            <h2><strong>URL linking</strong></h2>
            
            <p>You can also target tabs with the URL:</p>                        
            <pre><code class="html"><span class="url">http://www.your-url.com</span>#tab_2</code></pre>                        
            <br />
            <p>The URL's hash value (#tab_2) should match the <code>rel</code> attribute of the tab you want to open. <a href="#urlLinking"><code class="option">urlLinking</code></a> can be disabled by setting it to <code>false</code> in the <a href="#opts">options</a>.</p>
            
            <br /><br />
                        
            <p>View the <a href="external-linking.html#tab_2">external linking demo</a></p>
            
            </div> <!-- /#setup -->
            
            <div id="opts">
                
                <div id="opts_list">
                
                    <h1>Customization options</h1>
                    
                    <table>
                        <thead>
                            <tr>
                                <th>Option</th>
                                <th>Properties</th>
                                <th>Description</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr id="cah">
                                <th style="width:20%"><code>autoplay</code></th>
                                <td style="width:33%"><strong>boolean</strong> - Default: <code>false</code></td>
                                <td style="width:47%">Enable or disable auto playing. Set to <code>true</code> or <code>false</code>.</td>
                            </tr>
                            <tr>
                                <th><code>autoplayClickStop</code></th>
                                <td><strong>boolean</strong> - Default: <code>false</code></td>
                                <td>Disable autoplay on tab click. Set to <code>true</code> or <code>false</code>.</td>
                            </tr>
                            <tr>
                                <th><code>autoplayInterval</code></th>
                                <td><strong>integer</strong> - Default: <code>4000</code></td>
                                <td>Set the time between each autoplay interval (set the time in milliseconds; 1sec = 1000ms).</td>
                            </tr>
                            <tr>
                                <th><code>autoHeight</code></th>
                                <td><strong>boolean</strong> - Default: <code>false</code></td>
                                <td>Enable or disable auto height adjusting for the content. Set to <code>true</code> or <code>false</code>.</td>
                            </tr>
                            <tr>
                                <th><code>autoHeightTime</code></th>
                                <td><strong>integer</strong> - Default: <code>0</code></td>
                                <td>Set animation time for when the content container's height resizes (set the time in milliseconds; 1sec = 1000ms).</td>
                            </tr>
                            <tr>
                                <th><code>buttonsFunction</code></th>
                                <td><strong>string</strong> - Default: <code>'slide'</code></td>
                                <td>Specify if the directional buttons should click or slide through the tabs. Set to <code>'click'</code> or <code>'slide'</code>.</td>
                            </tr>                            
                            <tr>
                                <th><code>classBtnDisabled</code></th>
                                <td><strong>string</strong> - Default: <code>'st_btn_disabled'</code></td>
                                <td>The CSS class added to the prev/next buttons when they are unable to be clicked.</td>
                            </tr>
                            <tr>
                                <th><code>classBtnNext</code></th>
                                <td><strong>string</strong> - Default: <code>'st_next'</code></td>
                                <td>The CSS class used for the next-tab button.</td>
                            </tr>
                            <tr>
                                <th><code>classBtnPrev</code></th>
                                <td><strong>string</strong> - Default: <code>'st_prev'</code></td>
                                <td>The CSS class used for the previous-tab button.</td>
                            </tr>
                            <tr>
                                <th><code>classExtLink</code></th>
                                <td><strong>string</strong> - Default: <code>'st_ext'</code></td>
                                <td>The CSS class used for the external tab-links.</td>
                            </tr>
                            <tr>
                                <th><code>classTab</code></th>
                                <td><strong>string</strong> - Default: <code>'st_tab'</code></td>
                                <td>The CSS class used for the tabs.</td>
                            </tr>
                            <tr>
                                <th><code>classTabActive</code></th>
                                <td><strong>string</strong> - Default: <code>'st_tab_active'</code></td>
                                <td>The CSS class used for the active/highlighted tab.</td>
                            </tr>
                            <tr>
                                <th><code>classTabsContainer</code></th>
                                <td><strong>string</strong> - Default: <code>'st_tabs_container'</code></td>
                                <td>The CSS class used for the tabs container div element.</td>
                            </tr>
                            <tr>
                                <th><code>classTabsList</code></th>
                                <td><strong>string</strong> - Default: <code>'st_tabs'</code></td>
                                <td>The CSS class used for the tabs unordered list element.</td>
                            </tr>
                            <tr>
                                <th><code>classView</code></th>
                                <td><strong>string</strong> - Default: <code>'st_view'</code></td>
                                <td>The CSS class used for the content's slide container div element.</td>
                            </tr>
                            <tr>
                                <th><code>classViewActive</code></th>
                                <td><strong>string</strong> - Default: <code>'st_active_view'</code></td>
                                <td>The CSS class used for the active-view div element.</td>
                            </tr>
                            <tr>
                                <th><code>classViewContainer</code></th>
                                <td><strong>string</strong> - Default: <code>'st_view_container'</code></td>
                                <td>The CSS class used for the content's container div element.</td>
                            </tr>
                            <tr>
                                <th><code>contentAnim</code></th>
                                <td><strong>string</strong> - Default: <code>'slideH'</code></td>                       
                                <td>Animation for the content. <code>'fade'</code>, <code>'fadeOutIn'</code>, <code>'slideH'</code> or <code>'slideV'</code>. Leave empty <code>''</code> for no animation.</td>
                            </tr>
                            <tr>
                                <th><code>contentAnimTime</code></th>
                                <td><strong>integer</strong> - Default: <code>600</code></td>
                                <td>Content sliding/fading animation time in milliseconds (1sec = 1000ms).</td>
                            </tr>
                            <tr>
                                <th><code>contentEasing</code></th>
                                <td><strong>string</strong> - Default: <code>'easeInOutExpo'</code></td>
                                <td>Easing effect for the content sliding animation. Leave empty <code>''</code> if you don't want any effect (requires the <a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing Plugin</a>).</td>
                            </tr>
                            <tr>
                                <th><code>offsetBR</code></th>
                                <td><strong>integer</strong> - Default: <code>0</code></td>                                
                                <td>Offset the tabs pluss/minus the bottom or right direction (depending on the sliding <code class="option">orientation</code>).</td>                                
                            </tr>
                            <tr>
                                <th><code>offsetTL</code></th>
                                <td><strong>integer</strong> - Default: <code>0</code></td>
                                <td>Offset the tabs pluss/minus the top or left direction (depending on the sliding <code class="option">orientation</code>).</td>
                            </tr>
                            <tr id="orient">
                                <th><code>orientation</code></th>
                                <td><strong>string</strong> - Default: <code>'horizontal'</code></td>
                                <td>Specify the sliding direction of the tabs. Set to either <code>'horizontal'</code> or <code>'vertical'</code>.</td>
                            </tr>                            
                            <tr>
                                <th><code>tabSaveState</code></th>
                                <td><strong>boolean</strong> - Default: <code>false</code></td>
                                <td>Save the clicked tab's 'active' state with a cookie. Set to <code>true</code> or <code>false</code> (requires the <a href="http://plugins.jquery.com/project/Cookie">jQuery Cookie Plugin</a>).</td>
                            </tr>
                            <tr>
                                <th><code>tabsAnimTime</code></th>
                                <td><strong>integer</strong> - Default: <code>300</code></td>
                                <td>Tabs sliding animation time in milliseconds (1sec = 1000ms).</td>
                            </tr>
                            <tr>
                                <th><code>tabsEasing</code></th>
                                <td><strong>string</strong> - Default: <code>''</code></td>
                                <td>Easing effect for the tabs sliding animation. Leave empty  <code>''</code> if you don't want any effect (requires the <a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing Plugin</a>).</td>
                            </tr>
                            <tr>
                                <th><code>tabsScroll</code></th>
                                <td><strong>boolean</strong> - Default: <code>true</code></td>
                                <td>Enable or disable mouse scrolling. Set to <code>true</code> or <code>false</code> (requires the <a href="http://brandonaaron.net/code/mousewheel/docs">jQuery Mousewheel Plugin</a>).</td>
                            </tr>
                            <tr id="tabsSlideLength">
                                <th><code>tabsSlideLength</code></th>
                                <td><strong>integer</strong> - Default: <code>0</code></td>
                                <td>The width or height of the visible tabs area (depending on the sliding <code class="option">orientation</code>). The value should be the full width/height of the <code>.st_tabs_container</code> element. If set to <code>0</code> the script will calculate the value automatically.</td>
                            </tr>
                            <tr>
                                <th><code>totalHeight</code></th>
                                <td><strong>string</strong> - Default: <code>''</code></td>
                                <td>Specify the total height of the tabs layout. The value is set in pixels (px).</td>
                            </tr>
                            <tr>
                                <th><code>totalWidth</code></th>
                                <td><strong>string</strong> - Default: <code>''</code></td>
                                <td>Specify the total width of the tabs layout. The value is set in pixels (px). If set to <code>'auto'</code> the tabs width will adjust to its parent element.</td>
                            </tr>
                            <tr id="urlLinking">
                                <th><code>urlLinking</code></th>
                                <td><strong>boolean</strong> - Default: <code>true</code></td>
                                <td>Enable or disable linking to tabs via the URL. You can link to any tab by matching its <code>rel</code> attribute with a hash value in the URL: www.your-url.com<strong>#tab_1</strong></td>
                            </tr>
                        </tbody>
                    </table>
                
                </div> <!-- /#opts_list -->
         
            </div> <!-- /#opts -->
        
        </div> <!-- /#docs -->                           
    
    </div> <!-- /#container -->
    
    <div id="footer">               
       	
        <ul>
            <li>&copy; 2011 - <a href="http://codecanyon.net/user/360north">threesixty</a></li>                    
            <li class="fr"><a href="#top" id="top_btn">Return to Top</a></li>
        </ul>
    
    </div> <!-- /#footer -->    
    
	<script type="text/javascript">
	// Load the syntax highlight script and add the styles
	$.ajax({
		url: 'http://www.kristiandre.net/assets/js/highlight/highlight.pack.js',
		dataType: 'script',
		cache: true,
		success: function() {
			$('<link rel="stylesheet" type="text/css" href="http://www.kristiandre.net/assets/js/highlight/highlight.css" />').appendTo('head');
			hljs.tabReplace = '    ';
			hljs.initHighlightingOnLoad();
		}
	});
	</script>
    <script type="text/javascript">
	// Load the smooth-scroll script
	$.ajax({
		url: 'http://www.kristiandre.net/assets/js/jquery.smooth-scroll.pack.js',
		dataType: 'script',
		cache: true,
		success: function() {			
			$('a').smoothScroll({
				excludeWithin: ['#st_horizontal', '#st_vertical'],
				exclude: ['.st_ext'],
				afterScroll: function() {
					location.hash = this.hash;
				}
			});						
		}
	});
	</script>
  
</body>
</html>